<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="renderer" content="webkit">
    <meta content="歪秀购物, 购物, 大家电, 手机" name="keywords">
    <meta content="歪秀购物，购物商城。" name="description">
    <title>修改个人信息</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/myFile/imgold/icon/favicon.ico}">
    <link rel="stylesheet" type="text/css" th:href="@{/theme/css/base.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/theme/css/member.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/laydate/theme/default/laydate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/theme/css/home.css}">
    <script th:src="@{/theme/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/laydate/laydate.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/theme/js/delCartOnPages.js}"></script>
    <script type="text/javascript" th:src="@{/theme/js/searchToPage.js}"></script>
    <script type="text/javascript">

function logout() {
    $.ajax({
        url: "/user/logout",
        dataType: "json",
        data: {},
        async: false,
        success: function (data) {
            if (data["result"] == "ok") {
                layer.msg('退出成功', {time: 1000}, function () {
                    window.location="index" ;
                });
            } else if (data["result"] == "fail") {
                layer.msg('您还没有登录哦~', {time: 1000}, function () {
                    window.location.reload();
                });
            }
        },
        type: "post"
    });
}
          $(document).ready(function () {
              var data = $("#cartIdNull").val();
            $("#test").mouseover(function () {
                if(data=='notNull'){
                    layer.open({
                        type: 2,
                        title: '我的购物车',
                        shadeClose: true,
                        area: ['19%','60%'],
                        offset: ['9%', '76%'],
                        content: '/cart?pageNum=1&pageSize=100', //iframe的url
                    });
                }else{
                    layer.open({
                        type: 2,
                        title: '我的购物车',
                        shadeClose: true,
                        area: ['20%','20%'],
                        offset: ['9%', '76%'],
                        content: '/cart?pageNum=1&pageSize=100', //iframe的url
                    });
                }
            });

        });
        (function (a) {
            a.fn.hoverClass = function (b) {
                var a = this;
                a.each(function (c) {
                    a.eq(c).hover(function () {
                        $(this).addClass(b)
                    }, function () {
                        $(this).removeClass(b)
                    })
                });
                return a
            };
        })(jQuery);
        $(function () {
            $("#pc-nav").hoverClass("current");

        });
        layui.use('form', function(){
            var form = layui.form;

            //各种基于事件的操作，下面会有进一步介绍
        });
        //Demo
        $(function () {
            var sex = "[[${user.sex}]]";
            if (sex == "男")
                $("#sexMan").prop("checked", true)
            else if (sex == "女")
                $("#sexWoman").prop("checked", true)
        });

        layui.use('upload', function () {
            var load = null;
            var $ = layui.jquery
                , upload = layui.upload;
            var files;
            //执行实例
            var uploadInst = upload.render({
                elem: '#userHead' //绑定元素
                , url: '/file/uploadPic'
                , data: {
                    "type": "userHead",
                }
                , accept: 'images'
                , acceptMime: 'image/*' /* 打开文件选择器时 只显示图片*/
                // ,exts: //允许的后缀
                , auto: true /* 是否选完图片自动上传*/
                // , bindAction: 'btn_commit'
                , multiple: false /* 是否允许多文件上传 true是 false否*/
                // , number: 2 /* 设置能上传几个文件*/
                , headers: {token: 'sasasas'}
                , drag: true //拖拽上传

                , size: 1024 * 5 /* 设置上传单一文件最大尺寸*/


                , choose: function (obj) {  //选择图片后事件
                    //将每次选择的文件追加到文件队列
                    files = obj.pushFile();

                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function (index, file, result) {
                        // console.log(index); //得到文件索引
                        // console.log(file); //得到文件对象
                        // console.log(result); //得到文件base64编码，比如图片
                        $('#frontOfIdCard').html('<img style=\'width: 258px;height: 135px;\' src="' + result + '" alt="' + file.name + '" class="layui-upload-img">');

                        //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                        //这里还可以做一些 append 文件列表 DOM 的操作

                        //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                        //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                    });
                }
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致

                    load = layer.load(); //上传loading
                    // console.log(obj);
                }

                , done: function (res) {
                    layer.close(load);

                    if (res.result == 'ok') {
                        //do something （比如将res返回的图片链接保存到表单的隐藏域）
                        files = null;
                        layer.msg('上传成功', {time: 1000}, function () {
                        });
                    } else if (res.result == 'fail') {
                        layer.msg('数据库更新失败，请重试！', {time: 1000}, function () {
                        });
                    } else if (res.result == 'saveFail') {
                        layer.msg('文件储存失败，请重试！', {time: 1000}, function () {
                        });
                    } else if (res.result == 'noSession') {
                        layer.msg('登录失效，请重新登录！', {time: 1000}, function () {
                            window.location = "login";
                        });
                    }

                    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
                    var item = this.item;

                    //文件保存失败
                    //do something
                }
                , error: function () {
                    layer.msg('上传失败，请重试', {time: 1000}, function () {
                    });
                    //请求异常回调
                    //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                }
            });
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //同时绑定多个
            lay('#birthday').each(function () {
                laydate.render({
                    elem: this
                    , format: 'yyyy-MM-dd'
                    , type: 'date'
                    , trigger: 'click'
                });
            });
        });

        function commit() {
            var nickName = $("#nickName").val();
            var birthday = $("#birthday").val();
            var sex = $('input:radio:checked').val();
                $.ajax({
                    url: "/user/editMessage",
                    dataType: "json",
                    data: {"nickName": nickName, "birthday": birthday, "sex": sex},
                    async: false,
                    success: function (data) {
                        console.log(data["result"]);
                        if (data["result"] == "ok") {
                            console.log("修改成功");
                            layer.msg("修改成功", {time: 1000}, function () {
                                window.location = "myInfo";
                            });
                        } else if (data["result"] == "fail") {
                            layer.msg('修改失败', {time: 1000}, function () {
                                window.location.reload();
                            });
                        } else if (data["result"] == "noSession") {
                            layer.msg('登录失效，请重新登录！', {time: 1000}, function () {
                                window.location = "login";
                            });
                        } else {
                            layer.msg('系统错误', {time: 1000}, function () {
                                window.location.reload();
                            });
                        }
                    },
                    type: "post"
                });
        }
    </script>


</head>
<body>

 <input type="hidden" id="cartIdNull" th:value="${session.cartIsNull}">
<!--- header begin-->
<header id="pc-header">
    <div class="BHeader">
        <div class="yNavIndex">
            <ul class="BHeaderl">
                <li><a th:if="${session.userId}==null" th:href="@{/login}">请登录</a> </li>
                <li class="headerul" th:if="${session.userId}==null">|</li>
                <li><a th:if="${session.userId}==null" th:href="@{/register}">免费注册</a></li>
                <li class="headerul" th:if="${session.userId}==null">|</li>
                <li><a th:href="@{/myOrder?pageNum=1&pageSize=5}" th:if="${session.userId}!=null">我的订单</a></li>
                <li class="headerul" th:if="${session.userId}!=null">|</li>
                <li><a th:href="@{/myCollect?pageNum=1&pageSize=8}" th:if="${session.userId}!=null">我的收藏</a></li>
                <li class="headerul" th:if="${session.userId}!=null">|</li>
                <li id="pc-nav" class="menu" th:if="${session.userId}!=null" ><a th:href="@{#}" class="tit">我的淘淘</a>
                    <div class="subnav">
                        <a th:href="@{/accountSecurity}">账户安全</a>
                        <a th:href="@{/myAddress}">地址管理</a>
                        <a th:href="@{/myEvaluate?pageNum=1&pageSize=5}">我的评价</a> <a th:href="@{/viewHistory?pageNum=1&pageSize=5}">浏览记录</a>
                    </div>
                </li>
                <li class="headerul" th:if="${session.userId}!=null">|</li>
                <li th:if="${session.userId}!=null">
                    <a th:text="${session.userName}"></a>
                </li>
                <li th:if="${session.userId}!=null">
                    <img th:src="'/myFile/img/userHeadPic/'+${session.userHead}+''" onclick="javascript:window.location='myInfo'"  style=" width:30px;height:30px;">
                    <a href="javascript:logout()" style="float: right;">退出</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container clearfix">
        <div class="header-logo fl" ><h1><a th:href="@{/index}" style="color:#ea4949;">
            <img th:src="@{/myFile/imgold/icon/logo1.png}"style="width:100px;height:80px;"><strong>淘淘商城</strong></a></h1>
        </div>
        <div class="head-form fl">
            <form class="clearfix">
                <input type="text" class="search-text" id="searchKey" autocomplete="off" placeholder="手机">
                <button type="button" class="button" onclick="searchToPage();">搜索</button>
            </form>
            <div class="words-text clearfix">
                <a th:href="@{#}" class="red">1元秒爆</a>
                <a th:href="@{#}">低至五折</a>
                <a th:href="@{#}">农用物资</a>
                <a th:href="@{#}">买一赠一</a>
                <a th:href="@{#}">佳能相机</a>
                <a th:href="@{#}">稻香村月饼</a>
                <a th:href="@{#}">服装城</a>
            </div>
        </div>
       <div class="header-cart fr" th:if="${session.userId}!=null">
            <a  th:href="@{/myCart?pageNum=1&pageSize=5}" target="_blank"
               style="height:30px;width:30px;float:right;margin-right:50px;"><img
                    id="test" src="../myFile/imgold/icon/car.png"></a>
            <i th:if="${session.cartIsNull}=='notNull'" class="head-amount" id="cartCountExist" th:text="${session.cartAllCount}"></i>
            <i th:if="${session.cartIsNull}=='null'" class="head-amount" id="cartCountUnExist">0</i>
        </div>
        </div>
    </div>
</header>
<!-- header End -->

<div class="containers"><div class="pc-nav-item"><a th:href="@{/index}">首页</a> &gt; <a th:href="@{#}">我的信息修改</a></div></div>


<!-- 商城快讯 begin -->
<section id="member">
    <div class="member-center clearfix">
        <div class="member-left fl">
            <div class="member-apart clearfix">
                <div class="fl"><a th:href="@{#}"><img th:src="'/myFile/img/userHeadPic/'+${session.userHead}+''" onclick="javascript:window.location='myInfo'" ></a></div>
                <div class="fl">
                     <p>昵称：</p>
                    <p><a th:href="@{/#}" th:text="${session.userName}"></a></p>
                </div>
            </div>
            <div class="member-lists">
                <dl>
                    <dt>我的淘淘</dt>
                    <dd><a th:href="@{/myOrder?pageNum=1&pageSize=5}">我的订单</a></dd>
                    <dd><a th:href="@{/myCollect?pageNum=1&pageSize=8}">我的收藏</a></dd>
                    <dd><a th:href="@{/accountSecurity}">账户安全</a></dd>
                    <dd><a th:href="@{/myEvaluate?pageNum=1&pageSize=5}">我的评价</a></dd>
                    <dd><a th:href="@{/myAddress}">地址管理</a></dd>
                    <dd><a th:href="@{/viewHistory?pageNum=1&pageSize=5}">浏览记录</a></dd>
                </dl>
                <dl>
                    <dt>客户服务</dt>

                     <dd><a th:href="@{/request}">退货/退款记录</a></dd>
                </dl>
                <dl>
                    <dt>我的消息</dt>
                    <dd ><a th:href="@{#}">商城快讯</a></dd>
                    <dd><a th:href="@{#}">帮助中心</a></dd>
                </dl>
            </div>
        </div>
        <div class="member-right fr">
            <div class="member-head" style="background:#fff">
                <div class="member-heels"><h2 style="color:black"><strong>修改个人信息</strong></h2></div>
            </div>
            <div class="member-border">
                <div class="member-secure clearfix">
                    <div class="member-extent fl">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">头像</label>
                                <div class="layui-upload-drag" id="frontOfIdCard">
                                    <div id="userHead"><i class="layui-icon"></i></div>
                                    <p>点击或拖拽上传头像</p>
                                </div><input class="layui-upload-file" type="file" accept="image/*" name="file">
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">昵称</label>
                                <div class="layui-input-block">
                                    <input type="text" th:value="${user.nickname}" name="nickName" id="nickName"
                                           required lay-verify="required" placeholder="请输入新的昵称" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">生日</label>
                                <div class="layui-input-block">
                                    <input type="text" name="birthday" th:value="${user.birthday}" class="layui-input"
                                           id="birthday" placeholder="请输入你的生日">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" id="sexMan" value="男" title="男">
                                    <input type="radio" name="sex" id="sexWoman" value="女" title="女" checked>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    <button type="button" onclick="commit()" class="layui-btn" lay-filter="formDemo">立即修改</button>
                                </div>
                            </div>
                        </form>

                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<!-- 商城快讯 End -->

<!--- footer begin-->
<div class="aui-footer-bot">
    <div class="time-lists aui-footer-pd clearfix">
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img th:src="@{/myFile/imgold/icon/icon-d1.png}"></span>
                <em>消费者权益</em>
            </h4>
            <ul>
                <li><a th:href="@{#}">保障范围 </a> </li>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">服务中心 </a> </li>
                <li><a th:href="@{#}">服务中心</a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img th:src="@{/myFile/imgold/icon/icon-d2.png}"></span>
                <em>新手上路</em>
            </h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">服务中心 </a> </li>
                <li><a th:href="@{#}">服务中心</a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img th:src="@{/myFile/imgold/icon/icon-d3.png}"></span>
                <em>保障正品</em>
            </h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">服务中心 </a> </li>
                <li><a th:href="@{#}">服务中心</a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>
                <span><img th:src="@{/myFile/imgold/icon/icon-d1.png}"></span>
                <em>消费者权益</em>
            </h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">服务中心 </a> </li>
                <li><a th:href="@{#}">服务中心</a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
            </ul>
        </div>
    </div>
    <div style="border-bottom:1px solid #dedede"></div>
    <div class="time-lists aui-footer-pd time-lists-ls clearfix">
        <div class="aui-footer-list clearfix">
            <h4>购物指南</h4>
            <ul>
                <li><a th:href="@{#}">保障范围 </a> </li>
                <li><a th:href="@{#}">购物流程</a> </li>
                <li><a th:href="@{#}">会员介绍 </a> </li>
                <li><a th:href="@{#}">生活旅行</a> </li>
                <li><a th:href="@{#}"> 常见问题 </a> </li>
                <li><a th:href="@{#}"> 联系客服购物指南 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>特色服务</h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">服务中心 </a> </li>
                <li><a th:href="@{#}">服务中心</a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>帮助中心</h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">服务中心 </a> </li>
                <li><a th:href="@{#}">服务中心</a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
            </ul>
        </div>
        <div class="aui-footer-list clearfix">
            <h4>新手指导</h4>
            <ul>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">退货退款流程</a> </li>
                <li><a th:href="@{#}">服务中心 </a> </li>
                <li><a th:href="@{#}">服务中心</a> </li>
                <li><a th:href="@{#}">服务中心</a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
                <li><a th:href="@{#}"> 更多特色服务 </a> </li>
            </ul>
        </div>
    </div>
</div>
<!-- footer End -->
</body>
</html>